<template>
  <div class="page">

    <div class="content_box">
      <!-- 左边输入 开始 -->
      <div class="left_box">

        <el-form ref="addForm" :model="addForm" :rules="addFormRules" class="form_box" label-width="120px">
          <el-form-item label="姓名：" prop="id">
            <el-select v-model="addForm.id" placeholder="请输入至少两个关键词搜索" class="a_select" filterable remote :remote-method="getCustomer" :loading="loading" @change="changeCustomer" :disabled="id?true:false">
              <el-option v-for="(item,index) in customerList" :key="index" :label="`${item.name}/${item.code}`" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="预约城市：" prop="city">
            <el-select v-model="addForm.city" class="a_select" filterable @change="getHospital">
              <el-option v-for="(item,index) in cityList" :key="index" :label="item.name" :value="item.code"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="预约医院：" prop="hospitalId">
            <el-select v-model="addForm.hospitalId" class="a_select" filterable @change="changeHospital">
              <el-option v-for="(item,index) in hospitalList" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="预约时间：" prop="appointmentTime">
            <el-date-picker v-model="addForm.appointmentTime" class="a_input" type="datetime" placeholder="选择报名时间" value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="是否发送短信：" prop="sendSms">
            <el-radio-group v-model="addForm.sendSms">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注：" prop="remark">
            <el-input type="textarea" v-model="addForm.remark" class="a_area"></el-input>
          </el-form-item>
        </el-form>

      </div>
      <!-- 左边输入 end -->

      <!-- 右边预览 开始 -->
      <div class="right_box">
        <div class="show_box">
          <div class="cell">
            <div class="name">姓名：</div>
            <div class="txt">{{clueInfo.name}}</div>
          </div>
          <div class="cell">
            <div class="name">联系电话：</div>
            <div class="txt">{{clueInfo.phone}}</div>
          </div>
          <div class="cell">
            <div class="name">性别：</div>
            <div class="txt">{{clueInfo.gender}}</div>
          </div>
          <div class="cell">
            <div class="name">年龄：</div>
            <div class="txt">{{clueInfo.age}}岁</div>
          </div>
          <div class="cell">
            <div class="name">预约医院：</div>
            <div class="txt">{{addForm.hospitalName}}</div>
          </div>
          <div class="cell">
            <div class="name">预约时间：</div>
            <div class="txt">{{showTime(addForm.appointmentTime)}}</div>
          </div>
          <div class="cell">
            <div class="name">客户需求：</div>
            <div class="txt">{{clueInfo.enrollProjectNames||addForm.enrollProject}}</div>
          </div>
          <div class="cell">
            <div class="name">已交报名费：</div>
            <div class="txt">{{clueInfo.enrollFee}}元</div>
          </div>
          <!-- <div class="cell">
            <div class="name">客户信息：</div>
            <div class="txt">{{clueInfo.collectInfo}}</div>
          </div> -->
          <div class="cell">
            <div class="name">预约备注：</div>
            <div class="txt">{{addForm.remark}}</div>
          </div>
          <div class="cell">
            <div class="name"></div>
            <div class="txt">
              <el-button type="primary" size="small" @click="copyEvent()">复制预约内容</el-button>
            </div>
          </div>
        </div>

      </div>
      <!-- 右边预览 end -->

    </div>

  </div>
</template>
<script>
import { deepClone, showToast } from "@/common/util";
import { GETCUSTOMEROPTIONS } from "@/http/customer";
import {
  GETORDECLUEINFO,
  SUBMITORDERINFO,
  GETORDERINFO,
  UPDATEORDERRESCHEDULE,
} from "@/http/book";
import { GETHOSPITALOPTIONS,GETHOSPITALOPTIONSFORORDER } from "@/http/hospital";
import { GETCITYOPTIONS } from "@/http/system";
import moment from "moment";
export default {
  name: "AddBook",
  props: {
    id: {
      type: [String, Number],
      default: "",
    },
    oid: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      addForm: {sendSms:1},
      addFormRules: {
        id: [{ required: true, message: "请输入并搜索姓名", trigger: "change" }],
        city: [{ required: true, message: "请选择城市", trigger: "change" }],
        hospitalId: [
          { required: true, message: "请选择医院", trigger: "change" },
        ],
        appointmentTime: [
          { required: true, message: "请选择预约时间", trigger: "change" },
        ],
        sendSms:[{required:true,message:'请选择是否发送短信',trigger:'change'}],
        remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
      },
      customerList: [],
      clueInfo: {},
      cityList: [],
      hospitalList: [],
      loading: false,
    };
  },
  mounted() {
    let _this = this;
    this.getCity();
    if (_this.id) {
      _this.$set(_this.addForm, "id", _this.id);
      _this.getCustomer("", _this.id);
      _this.getClue(_this.id);
    }
    if (_this.oid) {
      _this.getInfo(_this.oid);
    }
    //this.getCustomer()
  },
  methods: {
    // 保存客户信息
    saveInfo() {
      let _this = this;
      _this.$refs.addForm.validate((valid) => {
        if (!valid) {
          _this.$emit("change");
          return false;
        }

        let oParams = deepClone(_this.addForm);
        oParams.clueId = _this.clueInfo.clueId;
        delete oParams.id;
        delete oParams.name;
        delete oParams.hospitalName;

        // 修改预约
        if (_this.oid) {
          oParams.orderId = _this.oid;
          UPDATEORDERRESCHEDULE(oParams)
            .then((res) => {
              if (res.code != 200) {
                _this.$emit("change");
                return false;
              }
              showToast({
                message: "修改成功",
                type: "success",
              });
              _this.$emit("change", { id: "bookDialog" });
            })
            .catch((error) => {
              _this.$emit("change");
            });
          return false;
        }

        console.log(oParams);
        SUBMITORDERINFO(oParams)
          .then((res) => {
            if (res.code != 200) {
              _this.$emit("change");
              return false;
            }
            showToast({
              message: "新增成功",
              type: "success",
            });
            _this.$emit("change", { id: "bookDialog" });
          })
          .catch((error) => {
            _this.$emit("change");
          });
      });
    },

    // 复制预约内容
    copyEvent() {
      let o = this.clueInfo;
      let m = this.addForm;
      let txt = `姓名：${o.name || ""}  联系电话：${
        o.phone
      }${String.fromCharCode(10)}性别：${o.gender}  年龄：${
        o.age || ""
      }${String.fromCharCode(10)}预约医院：${
        m.hospitalName || ""
      }${String.fromCharCode(10)}预约时间：${this.showTime(
        m.appointmentTime || ""
      )}${String.fromCharCode(10)}客户需求：${
        o.enrollProjectNames || m.enrollProject || ""
      }${String.fromCharCode(10)}已交报名费：${
        o.enrollFee
      }元${String.fromCharCode(10)}预约备注：${m.remark || ""}`;
      this.$copyText(txt).then((res) => {
        showToast({
          message: "复制成功",
          type: "success",
        });
      });
    },

    // 获取客户列表
    getCustomer(name, id) {
      let _this = this;
      let oParams = {};
      oParams.name = name;
      if ((!name || name.length < 2) && !id) {
        return false;
      }

      if (id) {
        oParams.id = id;
      }

      return new Promise((resolve, reject) => {
        GETCUSTOMEROPTIONS(oParams)
          .then((res) => {
            _this.customerList = res.data || [];
            resolve(res.data || []);
          })
          .catch((error) => {
            reject(error);
          });
      });
    },

    // 根据客户获取线索信息
    getClue(id) {
      let oParams = {};
      oParams.customerId = id;
      GETORDECLUEINFO(oParams).then((res) => {
        let list = res.data || [];
        this.clueInfo = list[0] ? list[0] : {};
      });
    },

    // 监听客户选择
    changeCustomer(e) {
      let list = this.customerList;
      let o = list.find((k) => k.id == e);
      this.getClue(o.id);
    },

    // 获取所有医院
    getHospital(code) {
      let list = this.cityList;
      let oParams = {};
      oParams.city = code;

      let o = list.find((k) => k.code == code);

      if (o) {
        this.$set(this.addForm, "cityName", o.name);
      }

      if (this.addForm.hospitalId || this.addForm.hospitalName) {
        delete this.addForm.hospitalId;
        delete this.addForm.hospitalName;
      }

      console.log(this.addForm);

      GETHOSPITALOPTIONSFORORDER(oParams).then((res) => {
        this.hospitalList = res.data || [];
      });
    },

    // 获取所有城市
    getCity() {
      GETCITYOPTIONS().then((res) => {
        this.cityList = res.data || [];
      });
    },

    // 监听医院选择
    changeHospital(id) {
      let list = this.hospitalList;
      let o = list.find((k) => k.id == id);
      if (o) {
        this.addForm.hospitalName = o.name;
      }
    },

    // 获取预约详情
    getInfo(id) {
      GETORDERINFO({ id: id }).then((res) => {
        let obj = res.data || {};
        let o = {};
        o.id = obj.customerId;
        o.clueId = obj.clueId;
        o.city = obj.city;
        o.cityName = obj.cityName;
        o.hospitalId = obj.hospitalId;
        //o.hospitalName = obj.hospitalName
        o.appointmentTime = obj.appointmentTime;
        o.remark = obj.remark;
        o.sendSms = obj.sendSms == 0?0:obj.sendSms
        //o.enrollProject = obj.enrollProject;

        this.getHospital(obj.city);

        this.clueInfo = deepClone(obj);
        this.addForm = o;

        console.log(this.addForm);
      });
    },

    // 格式化日期
    showTime(str) {
      let _weeks = {
        6: "周日",
        0: "周一",
        1: "周二",
        2: "周三",
        3: "周四",
        4: "周五",
        5: "周六",
      };
      if (!str) {
        return "";
      }
      let d = moment(str).format("YYYY年MM月DD日");
      let w = _weeks[moment(str).format("e")];
      let h = moment(str).format("HH:mm");
      let o = `${d} ${w} ${h}`;
      return o;
    },
  },
};
</script>
<style lang="scss" scoped>
.content_box {
  display: flex;
  .left_box {
    flex: 1;
    .a_input,
    .a_select,
    .a_area {
      width: 80%;
    }
  }
  .right_box {
    flex: 1;
    padding-left: 20px;
    position: relative;
    .show_box {
      background: #f2f2f2;
      padding: 10px;
      border-radius: 4px;
      .cell {
        display: flex;
        margin: 10px 0;
        .name {
          width: 86px;
          text-align: right;
        }
        .txt {
          flex: 1;
          flex-shrink: 0;
        }
      }
    }
  }
  .right_box:after {
    display: block;
    content: "";
    width: 1px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: #eee;
  }
}
</style>